<template>
	<view>
		<view class="btn-edit" style="background: #F08519; position: fixed; top: 60px; right: 20px; z-index: 99; color: #FFFFFF; padding: 2px 10px;"
		 @tap="handleClickChange" v-show="DEV">编辑</view>

		<scroll-view scroll-x class="bg-white nav pos-f tab-header-wrap" scroll-with-animation :scroll-left="scrollLeft">
			<view class="flex text-center">
				<view class="flex-sub cu-item" :class="index==curTabIndex?'text-blue cur':''" v-for="(item,index) in navArray" :key="index"
				 @tap="tabSelect" :data-id="index">
					<view class="tabtext">{{item.title}}</view>
				</view>
			</view>
		</scroll-view>
		<view class="content" v-if="!loading">
			<view class="tab-content-item user-base-info" v-show="curTabIndex == 0">
				<view class="content-item user-wrap">
					<view class="principal">
						<view class="principal-item">所属人员：{{base_info.create_name || base_info.tenant_name || ''}}</view>
					</view>
					<view class="base-info-item flex ">
						<text class="username-text">{{ base_info.name || '无' }}</text>
						<view class="level" v-show="base_info.level_num">{{base_info.level_num || ''}}</view>
					</view>
					<view class="user-profile-info">
						<text class="profile-item mr-1">{{ base_info.sex_str || '无' }}</text>
						<text class="profile-item mr-1">{{ base_info.age || '无' }}</text>
						<text class="profile-item">{{ base_info.phone || '无' }}</text>
					</view>
					<view class="flex rcs place-info">
						<text class="cuIcon cuIcon-locationfill"></text>
						<text class="place-text">{{ base_info.newsletter_address || '无' }}</text>
					</view>
					<view class="identify-info">
						<view class="job-item-title">意向工作类型: {{base_info.job_wanted_str}}</view>
						<view class="job-tag">
							<text class="job-item" v-for="(item, index) in base_info.personnel_work_name_str" :key="index">{{item}}</text>
						</view>
					</view>
				</view>

				<view class="content-item identify-info id-card-item">
					<!-- <view class="content-item-title">基本信息</view> -->
					<view class="flex rss identify-item">
						<view class="item-title">身份证号码：</view>
						<view class="item-content">{{ base_info.card_number || '无' }}</view>
					</view>
					<view class="flex rss identify-item">
						<view class="item-title">户籍地址：</view>
						<view class="item-content">{{ base_info.census_address || '无' }}</view>
					</view>
					<view class="flex rss identify-item">
						<view class="item-title">通讯地址：</view>
						<view class="item-content">{{ base_info.newsletter_address || '无' }}</view>
					</view>
					<view class="flex rss identify-item gray-line">
						<view class="item-title">身份证照片：</view>
						<view class="item-content id-card-wrap flex rcb">
							<view @tap="handleBannerClick(base_info.image_one || '../../static/icon/icon_card_front.Lng')" class="id-card-img">
								<img class="id-card-img" v-if="base_info.image_one" :src="base_info.image_one" alt="无图片" />
								<img class="id-card-img" v-else src="../../static/icon/icon_card_front.png" mode="widthFix" alt="无图片" />
							</view>
							<view @tap="handleBannerClick(base_info.image_two || '../../static/icon/icon_card_reverse.png')" class="id-card-img">
								<img class="id-card-img" v-if="base_info.image_two" :src="base_info.image_two" alt="无图片" />
								<img class="id-card-img" v-else src="../../static/icon/icon_card_reverse.png" mode="widthFix" alt="无图片" />
							</view>
						</view>
					</view>
					<view class="flex rss identify-item">
						<view class="item-title">简历来源：</view>
						<view class="item-content">{{ base_info.channel_name || '无' }}</view>
					</view>
					<view class="flex rss identify-item">
						<view class="item-title">民族：</view>
						<view class="item-content">{{ base_info.folk_str || '无' }}</view>
					</view>
					<view class="flex rss identify-item">
						<view class="item-title">籍贯：</view>
						<view class="item-content">{{ base_info.native_place || '无' }}</view>
					</view>
					<view class="flex rss identify-item">
						<view class="item-title">紧急联系人：</view>
						<view class="item-content">{{ base_info.emergency_contact || '无' }}</view>
					</view>
					<view class="flex rss identify-item">
						<view class="item-title">联系人关系：</view>
						<view class="item-content">{{ base_info.contact_relationship || '无' }}</view>
					</view>
					<view class="flex rss identify-item">
						<view class="item-title">紧急联系电话：</view>
						<view class="item-content">{{ base_info.contact_phone || '无' }}</view>
					</view>
					<view class="flex rss identify-item">
						<view class="item-title">是否特殊人群：</view>
						<view class="item-content">{{ base_info.is_special_str || '无' }}</view>
					</view>
					<view class="flex rss identify-item">
						<view class="item-title">备注：</view>
						<view class="item-content">{{ base_info.content || '无' }}</view>
					</view>
				</view>
			</view>

			<view class="tab-content-item user-work-info" v-show="curTabIndex == 1">
				<view class="content-item work-content-item">
					<view class="content-title-wrap flex rcs">
						<view class="line-style vertical-line content-title-line"></view>
						<view class="content-title-style">当前工作</view>
					</view>
					<view class="content-con-wrap">
						<block v-if="work_info.company_name !== '未在职'">
							<view class="flex rss identify-item">
								<view class="item-title">公司名称：</view>
								<view class="item-content">{{ work_info.company_name || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">在职岗位：</view>
								<view class="item-content">{{ work_info.position_name || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">入职日期：</view>
								<view class="item-content">{{ work_info.entry_time || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">员工工号：</view>
								<view class="item-content">{{ work_info.job_number || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">档案编号：</view>
								<view class="item-content">{{ work_info.archives || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">投保类别：</view>
								<view class="item-content">{{ work_info.insurance_category || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">协议类型：</view>
								<view class="item-content">{{ work_info.pact_type_name || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">合同签订：</view>
								<view class="item-content">{{ work_info.online || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">查看合同：</view>
								<view class="item-content" v-if="work_info.contract_path" @tap="downLoadFile">点击查看</view>
								<view class="item-content" v-else>无</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">合同生效：</view>
								<view class="item-content">{{ work_info.start_time || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">合同截止：</view>
								<view class="item-content">{{ work_info.end_time || '无' }}</view>
							</view>
							<!-- <view class="flex rss identify-item">
								<view class="item-title">面试时间：</view>
								<view class="item-content">{{ work_info.date || '无' }}</view>
							</view> -->
							<view class="flex rss identify-item">
								<view class="item-title">面试记录：</view>
								<view class="item-content">{{ work_info.audition_remark || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">体检记录：</view>
								<view class="item-content">{{ work_info.phy_remark || '无' }}</view>
							</view>
						</block>
						<block v-else>
							<NoThing />
						</block>
					</view>
				</view>

				<view class="content-item work-content-item list-content-item">
					<view class="content-title-wrap flex rcs">
						<view class="line-style vertical-line content-title-line"></view>
						<view class="content-title-style">工作简历</view>
					</view>
					<block v-if="work_list.length > 0">
						<view class="content-con-wrap list-item-view" v-for="(item, index) in work_list" :key="index">
							<view class="flex rss identify-item">
								<view class="item-title">公司名称:</view>
								<view class="item-content">{{ item.company_name || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">离职岗位:</view>
								<view class="item-content">{{ item.position_name || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">入职日期:</view>
								<view class="item-content">{{ item.start_date || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">离职日期:</view>
								<view class="item-content">{{ item.end_date || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">离职原因:</view>
								<view class="item-content">{{ item.leave_reason || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">备注:</view>
								<view class="item-content">{{ item.remark || '无' }}</view>
							</view>
						</view>
					</block>
					<block v-else>
						<NoThing />
					</block>
				</view>
			</view>

			<view class="tab-content-item user-edu-info" v-show="curTabIndex == 2">
				<view class="content-item edu-content-item list-content-item">
					<view class="content-title-wrap flex rcs">
						<view class="line-style vertical-line content-title-line"></view>
						<view class="content-title-style">教育经历</view>
					</view>
					<view class="content-con-wrap list-item-view">
						<view class="flex rss identify-item">
							<view class="item-title">第一学历：</view>
							<view class="item-content">{{edu_info.one_edu || '无' }}</view>
						</view>
						<view class="flex rss identify-item">
							<view class="item-title">毕业院校：</view>
							<view class="item-content">{{edu_info.one_school || '无' }}</view>
						</view>
						<view class="flex rss identify-item">
							<view class="item-title">毕业时间：</view>
							<view class="item-content">{{edu_info.one_finish_date || '无' }}</view>
						</view>
						<view class="flex rss identify-item">
							<view class="item-title">所学专业：</view>
							<view class="item-content">{{edu_info.one_major || '无' }}</view>
						</view>
					</view>
					<view class="content-con-wrap list-item-view">
						<view class="flex rss identify-item">
							<view class="item-title">第二学历：</view>
							<view class="item-content">{{edu_info.two_edu || '无' }}</view>
						</view>
						<view class="flex rss identify-item">
							<view class="item-title">毕业院校：</view>
							<view class="item-content">{{edu_info.two_school || '无' }}</view>
						</view>
						<view class="flex rss identify-item">
							<view class="item-title">毕业时间：</view>
							<view class="item-content">{{edu_info.two_finish_date || '无' }}</view>
						</view>
						<view class="flex rss identify-item">
							<view class="item-title">所学专业：</view>
							<view class="item-content">{{edu_info.two_major || '无' }}</view>
						</view>
					</view>
					<view class="content-con-wrap list-item-view">
						<view class="flex rss identify-item">
							<view class="item-title">参加培训情况：</view>
							<view class="item-content">{{edu_info.one_train || '无' }}</view>
						</view>
						<view class="flex rss identify-item">
							<view class="item-title">技能证书情况：</view>
							<view class="item-content">{{edu_info.two_train || '无' }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="tab-content-item user-contract-info" v-show="curTabIndex == 3">
				<view class="content-item work-content-item">
					<view class="content-title-wrap flex rcs">
						<view class="line-style vertical-line content-title-line"></view>
						<view class="content-title-style">社保信息</view>
					</view>
					<view class="content-con-wrap">
						<view class="flex rss identify-item">
							<view class="item-title">社保账号：</view>
							<view class="item-content">{{ security_info.social_account || '无' }}</view>
						</view>
						<view class="flex rss identify-item">
							<view class="item-title">公积金账号：</view>
							<view class="item-content">{{ security_info.accumulation_fund || '无' }}</view>
						</view>
						<view class="flex rss identify-item">
							<view class="item-title">社保缴纳情况：</view>
							<view class="item-content">{{ security_info.social_type || '无' }}</view>
						</view>
						<view class="flex rss identify-item">
							<view class="item-title">其他保险：</view>
							<view class="item-content">{{ security_info.other_insure || '无' }}</view>
						</view>
					</view>
				</view>
				<view class="content-item work-content-item list-content-item">
					<view class="content-title-wrap flex rcs">
						<view class="line-style vertical-line content-title-line"></view>
						<view class="content-title-style">合同列表</view>
					</view>

					<block v-if="contract_list.length > 0">
						<view class="content-con-wrap list-item-view" v-for="(item, index) in contract_list" :key="index">
							<view class="flex rss identify-item">
								<view class="item-title">合同类型：</view>
								<view class="item-content">{{ item.pact_type_name || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">签署类型：</view>
								<view class="item-content">{{ item.online || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">创建时间：</view>
								<view class="item-content">{{ item.create_time || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">生效日期：</view>
								<view class="item-content">{{ item.start_time || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">结束日期：</view>
								<view class="item-content">{{ item.end_time || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">签署企业：</view>
								<view class="item-content">{{ item.company_name || '无' }}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">签署岗位：</view>
								<view class="item-content">{{ item.position_name || '无' }}</view>
							</view>
						</view>
					</block>
					<block v-else>
						<NoThing />
					</block>
				</view>
			</view>

			<view class="tab-content-item user-salary-info" v-show="curTabIndex == 4">
				<view class="content-item work-content-item">
					<view class="content-title-wrap flex rcs">
						<view class="line-style vertical-line content-title-line"></view>
						<view class="content-title-style">银行卡信息</view>
					</view>
					<view class="content-con-wrap">
						<view class="flex rss identify-item">
							<view class="item-title">银行名称：</view>
							<view class="item-content">{{ salary_info.bank_name || '无' }}</view>
						</view>
						<view class="flex rss identify-item">
							<view class="item-title">开户行：</view>
							<view class="item-content">{{ salary_info.bank_addr || '无' }}</view>
						</view>
						<view class="flex rss identify-item">
							<view class="item-title">银行卡号：</view>
							<view class="item-content">{{ salary_info.bank_card || '无' }}</view>
						</view>
					</view>
				</view>

				<view class="content-item work-content-item list-content-item">
					<view class="content-title-wrap flex rcs">
						<view class="line-style vertical-line content-title-line"></view>
						<view class="content-title-style">工资列表</view>
					</view>
					<block v-if="salary_list.length > 0">
						<view class="content-con-wrap list-item-view" v-for="(item, index) in salary_list" :key="index">
							<view class="flex rss identify-item">
								<view class="item-title"></view>
								<view class="item-content"></view>
							</view>
						</view>
					</block>
					<block v-else>
						<NoThing />
					</block>
				</view>
			</view>
			
			<view class="tab-content-item user-follow-info" v-show="curTabIndex == 5">
				<view class="content-item follow-content-item list-content-item">
					<view class="content-title-wrap flex rcs">
						<view class="line-style vertical-line content-title-line"></view>
						<view class="content-title-style">跟进记录</view>
					</view>
					<block v-if="follow_list.length > 0">
						<view class="content-con-wrap follow-item-view list-item-view" v-for="(item, index) in follow_list" :key="index">
							<view class="flex rss identify-item">
								<view class="item-title">跟进人：</view>
								<view class="item-content">{{ item.follow_user_name}}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">跟进方式：</view>
								<view class="item-content">{{ item.follow_type_name}}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">跟进内容：</view>
								<view class="item-content">{{ item.desc}}</view>
							</view>
							<view class="flex rss identify-item">
								<view class="item-title">创建时间：</view>
								<view class="item-content">{{ item.create_time}}</view>
							</view>
						</view>
					</block>
					<block v-else>
						<NoThing />
					</block>
				</view>
			</view>
		</view>
		<Loading v-else />
	</view>
</template>
<script>
	import Loading from '../../components/common/loading.vue'
	import NoThing from '../../components/common/no-thing.vue'
	export default {
		components: {
			NoThing,
			Loading,
		},
		data() {
			return {
				DEV: this.__DEV__,
				loading: true,
				curTabIndex: 0,
				scrollLeft: 0,
				navArray: [{
						id: 1,
						title: '基本信息',
						data: {},
					},
					{
						id: 2,
						title: '工作信息',
						data: {},
					},
					{
						id: 3,
						title: '教育信息',
						data: {},
					},
					{
						id: 4,
						title: '社保及合同',
						data: {},
					},
					{
						id: 5,
						title: '工资信息',
						data: {},
					},
					{
						id: 6,
						title: '跟进记录',
						data: {},
					},
				],
				item: '',
				showGallary: false,
				Images: this.Images,
				id: '', //上页面传过来的id
				token: '', //取得token
				resumeData: {}, // 接后台数据
				jobArray: [], //接后台工作经验数据

				edu_info: {},
				base_info: {},
				work_info: {},
				salary_info: {},
				security_info: {},

				work_list: [],
				salary_list: [],
				follow_list: [],
				contract_list: [],
			};
		},
		// 监听原生标题导航按钮点击事件
		onNavigationBarButtonTap(e) {
			// console.log(e.index)
			switch (e.index) {
				case 0:
					// 打开发布页面
					let resume = encodeURIComponent(JSON.stringify(this.resumeData));
					uni.navigateTo({
						url: '/pages/publish/talent_add_manual?page_flag=detail&resume=' + resume
					});
					break;
			}
		},
		// 接上个页面传过来的参数
		onLoad(option) {
			if (option.id) {
				this.id = option.id;
			}
		},
		methods: {
			// 导航栏方法
			tabSelect(e) {
				let currentIndex = e.currentTarget.dataset.id;
				this.scrollTop = 0;
				console.log('this.curTabIndex, currentIndex---->', this.curTabIndex, currentIndex);
				if (this.curTabIndex != currentIndex) {
					this.curTabIndex = currentIndex;
					this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
					// this.tabnum = this.curTabIndex;
					// this.requestDataSources(this.curTabIndex);
					console.log('this.curTabIndex---->', this.curTabIndex);
				}
			},
			handleBannerClick(src) {
				this.item = src;
				this.showGallary = true;
			},
			handleGallaryClick() {
				this.showGallary = false;
			},
			// 取token
			getToken() {
				try {
					const value = uni.getStorageSync('login_key');
					if (value) {
						this.token = value;
					}
				} catch (e) {
					// error
				}
			},
			handleClickChange() {
				let resume = encodeURIComponent(JSON.stringify(this.resumeData));
				uni.navigateTo({
					url: '/pages/publish/talent_add_manual?page_flag=detail&resume=' + resume
				});
			},
			// 请求后台数据
			async requestUserInfoDetail() {
				if (!this.id) return;
				// 发请求
				let url = this.ServicesApi.resume;
				let data = {
					id: this.id
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					this.edu_info = result.data.edu_info;
					this.base_info = result.data.base_info;
					this.resumeData = result.data.base_info;
					this.work_info = result.data.work_info;
					this.salary_info = result.data.salary_info;
					this.security_info = result.data.security_info;
					this.work_list = result.data.work_list;
					this.salary_list = result.data.salary_list;
					this.follow_list = result.data.follow_list;
					this.contract_list = result.data.contract_list;
				}
				setTimeout(() => this.loading = false, 100);
			},
			downLoadFile() {
				uni.showLoading({
					title: '打开中。。。'
				});
				const downloadTask = uni.downloadFile({
					url: this.work_info.contract_path,
					success: (res) => {
						console.log('downloadTask----> res---->', res);
						if (res.statusCode === 200) {
							uni.openDocument({
								filePath: res.tempFilePath,
								success: function(res) {
									uni.hideLoading();
									console.log('打开文档成功');
								},
								fail: function(error) {
									console.log('error---->', error);
									uni.hideLoading();
									uni.showToast({
										icon: 'none',
										title: '不支持的文件类型',
									})
								}
							});
							// uni.saveFile({
							// 	tempFilePath: res.tempFilePath,
							// 	success: function(res) {
							// 		let savedFilePath = res.savedFilePath;
							// 		console.log('savedFilePath---->', savedFilePath);
							// 	}
							// });
						}
					}
				});

				downloadTask.onProgressUpdate((res) => {
					console.log('下载进度' + res.progress);
					console.log('已经下载的数据长度' + res.totalBytesWritten);
					console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				});
			}
		},
		mounted() {
			this.requestUserInfoDetail();
		},
		onShow: function(e) {
			// #ifndef H5
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			if (currPage.data && currPage.data.isDoRefresh == true) {
				currPage.data.isDoRefresh = false;
				// console.log('s刷新');
				this.requestUserInfoDetail();
			} else {
				//不用刷新
			}
			// #endif
			// #ifdef H5
			this.requestUserInfoDetail()
			// #endif
		}
	};
</script>

<style scoped lang="stylus">
	.tab-header-wrap {
		padding: 0 20upx;
		height: 92rpx;
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		left: 0;
		z-index: 21;
		border-bottom: 1px solid #eee;
	}

	.content {
		flex: 1;
		padding-top: 94rpx;
		background-color: #F3F3F3;

		.container {
			position: fixed;
			left: 0px;
			right: 0px;
			top: 0px;
			bottom: 0px;
			background: #000;
			z-index: 99;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.wrapper {
				width: 100%;
				height: 0;
				padding-bottom: 60%;

				.gallary-img {
					width: 100%;

				}
			}
		}

		.principal {
			padding: 0 32upx;
			color: #4A90E2;
			background: #E9F3FF;
			display: inline-block;
			line-height: 64upx;
			transform: skewX(30deg);
			float: right;
			margin-right: -57upx;
		}

		.principal-item {
			transform: skewX(-30deg);
		}

		.change-btn {
			height: 50upx;
			width: 200upx;
			background: #0081FF;
			border-radius: 8upx;
			text-align: center;
			line-height: 50upx;
		}

		.uni-timeline {
			margin: 0;
		}

		.base-info-item {
			justify-content: flex-start;
			align-items: center;
			margin-top: 52upx;
		}

		.level {

			background-image: url('../../static/img/img_bg_talent.png');
			background-size: 100% 100%;
			height: 36upx;
			width: 104upx;
			padding-left: 14upx;
			margin-left: 34upx;
			color: #D3942E;
		}

		.content-item {
			padding: 30upx 40upx;
			overflow: hidden;
			margin-bottom: 20upx;
			background-color: #FFFFFF;
		}
		
		.list-content-item {
			.list-item-view {
				padding-bottom: 30rpx;
				border-bottom: 2rpx dashed #EEEEEE;
			}
			.list-item-view:last-of-type {
				border-bottom: 0;
			}
		}

		.user-wrap {
			padding-top: 0;
		}

		.content-item-title {
			color: #333333;
			font-size: 32upx;
			font-weight: 600;
			margin-bottom: 20upx;
		}

		.job-item-title {
			font-size: 30upx;
			line-height: 42upx;
			color: #999;
		}

		.job-tag {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 20upx 0;
			padding-top: 3upx;
		}

		.job-item {
			list-style: 34upx;
			border: 1upx solid #327ED6;
			padding: 0 18upx;
			margin-right: 16upx;
			margin-top: 16upx;
			display: inline-block;
			color: #327ED6;
			font-size: 24upx;
		}

		.username-text {
			color: #333333;
			font-size: 48upx;
			font-weight: 600;
		}

		.place-info {
			margin-top: 14upx;
			border-bottom: 1upx solid #DBDBDB;
			padding-bottom: 30upx;
			margin-bottom: 34upx;
		}

		.place-text {
			color: #555555;
			font-size: 28upx;
			margin-left: 10upx;
		}

		.user-profile-info {
			margin-top: 20upx;
			font-size: 30upx;
			line-height: 42upx;
		}

		.profile-item {
			color: #333333;
			font-size: 28upx;
		}

		.identify-item {
			font-size: 30upx;
			color: #666666;
			margin-top: 30upx;
		}

		.identify-item .item-titleL {
			flex: 1;
			text-align: left;
		}

		.identify-item .item-content {
			flex: 2;
			color: #333333;
			text-align: right;
		}

		.gray-line {
			padding-bottom: 40upx;
			margin-bottom: 52upx;
			border-bottom: 1upx solid #dbdbdb;
		}

		.id-card-item {
			margin-bottom: 0;
		}

		.id-card-wrap,
		.id-card-img {
			width: 200upx;
			height: 126upx;
			justify-content: flex-end;
		}

		.id-card-img:nth-of-type(1) {
			margin-right: 30upx;
		}

		.item-icon {
			width: 20upx;
			height: 20upx;
			border-radius: 50%;
			background-color: #007AFF;
		}

		.datetime {
			color: #666666;
			font-size: 28upx;
		}

		.timeline-con-title {
			color: #333333;
			font-size: 32upx;
			margin: 10upx 0;
		}

		.timeline-con-text {
			color: #666666;
			font-size: 28upx;
		}

		.content-title-wrap {
			.content-title-line {
				width: 6rpx;
				height: 36rpx;
				background-color: #007AFF;
			}

			.content-title-style {
				color: #333333;
				font-size: 36rpx;
				margin-left: 10rpx;
			}
		}
	}
</style>
